<template>
  <div class="categorySecond">
    <!-- 用户数据 -->
    <div class="tableform">
      <el-button
        type="primary"
        @click="addcategory"
      >添加品牌</el-button>
      <el-table
        border
        ref="multipleTable"
        :data="categoryList"
        tooltip-effect="dark"
        style="width: 100%;margin-top:10px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>
        <el-table-column
          prop="id"
          label="品牌编号"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="brandName"
          label="品牌名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="brandLogo"
          label="品牌logo"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <img
              :src="'http://127.0.0.1:3000'+scope.row.brandLogo"
              alt=""
              style="width:150px;height:100px;"
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="categoryName"
          label="所属分类"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)"
              type="primary"
              icon="el-icon-edit"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      class="pageination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 添加分类 -->
    <el-dialog
      title="添加分类"
      :visible.sync="adddialogFormVisible"
    >
      <el-form :model="addForm">
        <el-form-item
          label="请选择分类"
          width="80"
        >
          <el-select
            v-model="addForm.categoryId"
            placeholder="请选择分类"
          >
            <el-option
              v-for="item in categoryoptions"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id"
            > </el-option>
          </el-select>
        </el-form-item>
        <el-input
          v-model="addForm.brandName"
          auto-complete="off"
          placeholder="请输入品牌名称"
        ></el-input>
        <!-- 上传图片 -->
        <el-upload
              class="upload-demo"
              name = 'pic1'
              action="http://127.0.0.1:3000/category/addSecondCategoryPic"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :on-success="uploadSuccess"
              :before-upload='uploadBeforeValid'
              :with-credentials='true'
              style="margin-top:15px"
              list-type="picture" >
              <el-button
                size="small"
                type="primary"
              >点击上传</el-button>
              <div slot="tip" class="el-upload__tip" v-if='is_show'>只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="adddialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addcategorySecond"
        >确 定</el-button>
      </div>
    </el-dialog>
     <!-- 图片预览弹框 -->
    <el-dialog title="图片预览" :visible.sync="picdialogFormVisible">
      <img :src="addForm.brandLogo" alt="">
    </el-dialog>
    <!-- 编辑分类 -->
    <el-dialog
      title="编辑分类"
      :visible.sync="editdialogFormVisible"
    >
      <el-form :model="editForm">
        <el-form-item
          label="请选择分类"
          width="80"
        >
          <el-select
            v-model="editForm.categoryId"
            placeholder="请选择分类"
          >
            <el-option
              v-for="item in categoryoptions"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id"
            > </el-option>
          </el-select>
        </el-form-item>
        <el-input
          v-model="editForm.brandName"
          auto-complete="off"
          placeholder="请输入品牌名称"
        ></el-input>
        <!-- 上传图片 -->
        <el-upload
              class="upload-demo"
              name = 'pic1'
              action="http://127.0.0.1:3000/category/addSecondCategoryPic"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :on-success="uploadSuccess"
              :before-upload='uploadBeforeValid'
              :with-credentials='true'
              style="margin-top:15px"
              list-type="picture" >
              <el-button
                size="small"
                type="primary"
              >点击上传</el-button>
              <div slot="tip" class="el-upload__tip" v-if='is_show'>只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="editdialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editcategorySecond"
        >确认修改</el-button>
      </div>
    </el-dialog>
     <!-- 图片预览弹框 -->
    <el-dialog title="图片预览" :visible.sync="picdialogFormVisible">
      <img :src="editForm.brandLogo" alt="">
    </el-dialog>

  </div>
</template>
<script>
import {queryCategorySecond, queryCategoryFirst, addCategorySecond, editCategorySecond} from '@/api'
export default {
  data () {
    return {
      // 渲染数据
      categoryList: [{
        id: '',
        brandName: '',
        categoryId: '',
        categoryName: '',
        brandLogo: ''
      }],
      multipleSelection: [],
      //   分页
      page: 1,
      pageSize: 10,
      total: 0,
      //  控制添加分类的显示与隐藏
      adddialogFormVisible: false,
      //  控制修改分类的显示与隐藏
      editdialogFormVisible: false,
      //   添加分类
      addForm: {
        // 品牌名称
        brandName: '',
        // 所属分类id
        categoryId: '',
        // 品牌logo图片地址
        brandLogo: '',
        // 火热的品牌
        hot: 1
      },
      // 分类
      categoryoptions: [
        {
          value: '',
          label: ''
        }
      ],
      //   编辑分类
      editForm: {
        brandLogo: '',
        brandName: '',
        categoryId: '',
        categoryName: '',
        hot: '',
        id: '',
        isDelete: ''
      },
      // 上传的图片列表
      fileList: [],
      // 控制图片预览弹框的显示和隐藏
      picdialogFormVisible: false,
      pic1: '',
      // 上传图片下方的文字显示与否
      is_show: false
    }
  },
  methods: {
    // 分页
    handleSizeChange (value) {
      console.log(value)
      this.pageSize = value
      this.init()
    },
    handleCurrentChange (value) {
      console.log(value)
      this.page = value
      this.init()
    },
    // 多选
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 编辑二级页面数据
    handleEdit (row) {
      console.log(row)
      //   控制修改分类对话框的显示和隐藏
      this.editdialogFormVisible = true
      // this.editForm.brandLogo = row.brandLogo
      this.editForm.brandName = row.brandName
      this.editForm.categoryId = row.categoryId
      this.editForm.categoryName = row.categoryName
      this.editForm.hot = row.hot
      this.editForm.id = row.id
      this.editForm.isDelete = row.isDelete
      this.getcategory()
    },
    // 添加分类
    addcategorySecond () {
      // console.log(this.addForm)
      // 调用接口，实现添加分类的功能
      addCategorySecond(this.addForm)
        .then(res => {
          // console.log(res)
          if (res.success) {
            this.$message.success('品牌添加成功')
            this.adddialogFormVisible = false
            this.addForm = ''
            this.init()
          } else {
            this.$message.error('品牌添加失败')
          }
        })
    },
    // 修改分类
    editcategorySecond () {
      console.log(this.editForm, '---------')
      // 调用接口,实现分类的修改
      editCategorySecond(this.editForm)
        .then(res => {
          console.log(res)
        })
    },
    // 上传图片
    // 文件列表移除文件时 --- 不能将本地存储的图片删除
    handleRemove (file, fileList) {
      // console.log(file)
      if (!file.response) {
        return false
      }
      // 获取要删除的图片路径
      var filepath = file.response.picAddr
      // findIndex:可以查找指定数据的所在索引位置：它有一个回调函数，回调函数有一个参数，就是遍历数组时每次遍历到的成员，每次使用一个成员的数据进行函数的业务逻辑的计算，如果满足条件，则返回当前索引
      // 查找要删除的图片的索引
      var index = this.addForm.brandLogo.findIndex(item => {
        return item.brandLogo === filepath
      })
      // 删除对应的图片
      this.addForm.brandLogo.splice(index, 1)
    },
    // 图片预览
    handlePreview (file) {
      // console.log(file)
      this.picdialogFormVisible = true
      // 设置图片路径
      this.addForm.brandLogo = 'http://localhost:3000/' + file.response.picAddr
    },
    // 图片上传成功时
    uploadSuccess (response, file, fileList) {
      console.log(response)
      //   将当前上传成功的文件信息存储到数组
      // this.addForm.brandLogo.push(response.picAddr)
      this.addForm.brandLogo = response.picAddr
    },
    // 上传图片之前
    uploadBeforeValid (file) {
      // console.log(file)
      // 判断图片大小是否符合
      if (file.size > 500 * 1024) {
        // 给出提示
        this.$message.warning('图片大小大于指定大小')
        return false
      }
      if (file.size > 500000) {
        this.is_show = true
        // 如果返回false.则中止上传操作
        return false
      } else {
        this.is_show = false
      }
    },
    // 请选择品牌
    addcategory () {
      this.adddialogFormVisible = true
      // 调用接口,获取一级分类数据
      this.getcategory()
    },
    // 动态渲染数据
    init () {
      // 调用接口渲染数据
      queryCategorySecond({page: this.page, pageSize: this.pageSize})
        .then(res => {
          // console.log(res)
          this.categoryList = res.rows
          this.total = res.total
          if (res.rows.id === this.categoryId) {
            this.categoryList.categoryName = res.rows.categoryName
          }
        })
    },
    // 品牌列表
    getcategory () {
      queryCategoryFirst({page: this.page, pageSize: this.pageSize})
        .then(result => {
        //   console.log('result----', result)
          this.categoryoptions = result.rows
        })
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style lang="scss" scoped>
.categorySecond {
  margin: 10px 0;
  .tableform {
    padding: 30px 20px;
    background-color: #fff;
  }
  .cell {
    text-align: center;
  }
  .pageination {
    margin-top: 15px;
    background-color: #eee;
    padding: 10px 20px;
  }
  el-table {
    height: 300px;
    overflow: scroll;
  }
  .files {
    margin-top: 15px;
  }
}
</style>
